/*
 * 图片转换对话框脚本
 **/

var tableData = [],
  //编辑器页面table
  editorTable = null,
  chartsConfig = window.typeConfig,
  resizeTimer = null,
  //初始默认图表类型
  currentChartType = 0

window.onload = function() {
  editorTable = domUtils.findParentByTagName(
    editor.selection.getRange().startContainer,
    'table',
    true
  )

  //未找到表格， 显示错误页面
  if (!editorTable) {
    document.body.innerHTML = "<div class='edui-charts-not-data'>未找到数据</div>"
    return
  }

  //初始化图表类型选择
  initChartsTypeView()
  renderTable(editorTable)
  initEvent()
  initUserConfig(editorTable.getAttribute('data-chart'))
  $('#scrollBed .view-box:eq(' + currentChartType + ')').trigger('click')
  updateViewType(currentChartType)

  dialog.addListener('resize', function() {
    if (resizeTimer != null) {
      window.clearTimeout(resizeTimer)
    }

    resizeTimer = window.setTimeout(function() {
      resizeTimer = null

      renderCharts()
    }, 500)
  })
}

function initChartsTypeView() {
  var contents = []

  for (var i = 0, len = chartsConfig.length; i < len; i++) {
    contents.push(
      '<div class="view-box" data-chart-type="' +
        i +
        '"><img width="300" src="images/charts' +
        i +
        '.png"></div>'
    )
  }

  $('#scrollBed').html(contents.join(''))
}

//渲染table， 以便用户修改数据
function renderTable(table) {
  var tableHtml = []

  //构造数据
  for (var i = 0, row; (row = table.rows[i]); i++) {
    tableData[i] = []
    tableHtml[i] = []

    for (var j = 0, cell; (cell = row.cells[j]); j++) {
      var value = getCellValue(cell)

      if (i > 0 && j > 0) {
        value = +value
      }

      if (i === 0 || j === 0) {
        tableHtml[i].push('<th>' + value + '</th>')
      } else {
        tableHtml[i].push('<td><input type="text" class="data-item" value="' + value + '"></td>')
      }

      tableData[i][j] = value
    }

    tableHtml[i] = tableHtml[i].join('')
  }

  //draw 表格
  $('#tableContainer').html(
    '<table id="showTable" border="1"><tbody><tr>' +
      tableHtml.join('</tr><tr>') +
      '</tr></tbody></table>'
  )
}

/*
 * 根据表格已有的图表属性初始化当前图表属性
 */
function initUserConfig(config) {
  var parsedConfig = {}

  if (!config) {
    return
  }

  config = config.split(';')

  $.each(config, function(index, item) {
    item = item.split(':')
    parsedConfig[item[0]] = item[1]
  })

  setUserConfig(parsedConfig)
}

function initEvent() {
  var cacheValue = null,
    //图表类型数
    typeViewCount = chartsConfig.length - 1,
    $chartsTypeViewBox = $('#scrollBed .view-box')

  $('.charts-format').delegate('.format-ctrl', 'change', function() {
    renderCharts()
  })

  $('.table-view')
    .delegate('.data-item', 'focus', function() {
      cacheValue = this.value
    })
    .delegate('.data-item', 'blur', function() {
      if (this.value !== cacheValue) {
        renderCharts()
      }

      cacheValue = null
    })

  $('#buttonContainer').delegate('a', 'click', function(e) {
    e.preventDefault()

    if (this.getAttribute('data-title') === 'prev') {
      if (currentChartType > 0) {
        currentChartType--
        updateViewType(currentChartType)
      }
    } else {
      if (currentChartType < typeViewCount) {
        currentChartType++
        updateViewType(currentChartType)
      }
    }
  })

  //图表类型变化
  $('#scrollBed').delegate('.view-box', 'click', function(e) {
    var index = $(this).attr('data-chart-type')
    $chartsTypeViewBox.removeClass('selected')
    $($chartsTypeViewBox[index]).addClass('selected')

    currentChartType = index | 0

    //饼图， 禁用部分配置
    if (currentChartType === chartsConfig.length - 1) {
      disableNotPieConfig()

      //启用完整配置
    } else {
      enableNotPieConfig()
    }

    renderCharts()
  })
}

function renderCharts() {
  var data = collectData()

  $('#chartsContainer').highcharts(
    $.extend({}, chartsConfig[currentChartType], {
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: data.title,
        x: -20 //center
      },
      subtitle: {
        text: data.subTitle,
        x: -20
      },
      xAxis: {
        title: {
          text: data.xTitle
        },
        categories: data.categories
      },
      yAxis: {
        title: {
          text: data.yTitle
        },
        plotLines: [
          {
            value: 0,
            width: 1,
            color: '#808080'
          }
        ]
      },
      tooltip: {
        enabled: true,
        valueSuffix: data.suffix
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 1
      },
      series: data.series
    })
  )
}

function updateViewType(index) {
  $('#scrollBed').css('marginLeft', -index * 324 + 'px')
}

function collectData() {
  var form = document.forms['data-form'],
    data = null

  if (currentChartType !== chartsConfig.length - 1) {
    data = getSeriesAndCategories()
    $.extend(data, getUserConfig())

    //饼图数据格式
  } else {
    data = getSeriesForPieChart()
    data.title = form['title'].value
    data.suffix = form['unit'].value
  }

  return data
}

/**
 * 获取用户配置信息
 */
function getUserConfig() {
  var form = document.forms['data-form'],
    info = {
      title: form['title'].value,
      subTitle: form['sub-title'].value,
      xTitle: form['x-title'].value,
      yTitle: form['y-title'].value,
      suffix: form['unit'].value,
      //数据对齐方式
      tableDataFormat: getTableDataFormat(),
      //饼图提示文字
      tip: $('#tipInput').val()
    }

  return info
}

function setUserConfig(config) {
  var form = document.forms['data-form']

  config.title && (form['title'].value = config.title)
  config.subTitle && (form['sub-title'].value = config.subTitle)
  config.xTitle && (form['x-title'].value = config.xTitle)
  config.yTitle && (form['y-title'].value = config.yTitle)
  config.suffix && (form['unit'].value = config.suffix)
  config.dataFormat == '-1' && (form['charts-format'][1].checked = true)
  config.tip && (form['tip'].value = config.tip)
  currentChartType = config.chartType || 0
}

function getSeriesAndCategories() {
  var form = document.forms['data-form'],
    series = [],
    categories = [],
    tmp = [],
    tableData = getTableData()

  //反转数据
  if (getTableDataFormat() === '-1') {
    for (var i = 0, len = tableData.length; i < len; i++) {
      for (var j = 0, jlen = tableData[i].length; j < jlen; j++) {
        if (!tmp[j]) {
          tmp[j] = []
        }

        tmp[j][i] = tableData[i][j]
      }
    }

    tableData = tmp
  }

  categories = tableData[0].slice(1)

  for (var i = 1, data; (data = tableData[i]); i++) {
    series.push({
      name: data[0],
      data: data.slice(1)
    })
  }

  return {
    series: series,
    categories: categories
  }
}

/*
 * 获取数据源数据对齐方式
 */
function getTableDataFormat() {
  var form = document.forms['data-form'],
    items = form['charts-format']

  return items[0].checked ? items[0].value : items[1].value
}

/*
 * 禁用非饼图类型的配置项
 */
function disableNotPieConfig() {
  updateConfigItem('disable')
}

/*
 * 启用非饼图类型的配置项
 */
function enableNotPieConfig() {
  updateConfigItem('enable')
}

function updateConfigItem(value) {
  var table = $('#showTable')[0],
    isDisable = value === 'disable' ? true : false

  //table中的input处理
  for (var i = 2, row; (row = table.rows[i]); i++) {
    for (var j = 1, cell; (cell = row.cells[j]); j++) {
      $('input', cell).attr('disabled', isDisable)
    }
  }

  //其他项处理
  $('input.not-pie-item').attr('disabled', isDisable)
  $('#tipInput').attr('disabled', !isDisable)
}

/*
 * 获取饼图数据
 * 饼图的数据只取第一行的
 **/
function getSeriesForPieChart() {
  var series = {
      type: 'pie',
      name: $('#tipInput').val(),
      data: []
    },
    tableData = getTableData()

  for (var j = 1, jlen = tableData[0].length; j < jlen; j++) {
    var title = tableData[0][j],
      val = tableData[1][j]

    series.data.push([title, val])
  }

  return {
    series: [series]
  }
}

function getTableData() {
  var table = document.getElementById('showTable'),
    xCount = table.rows[0].cells.length - 1,
    values = getTableInputValue()

  for (var i = 0, value; (value = values[i]); i++) {
    tableData[Math.floor(i / xCount) + 1][(i % xCount) + 1] = values[i]
  }

  return tableData
}

function getTableInputValue() {
  var table = document.getElementById('showTable'),
    inputs = table.getElementsByTagName('input'),
    values = []

  for (var i = 0, input; (input = inputs[i]); i++) {
    values.push(input.value | 0)
  }

  return values
}

function getCellValue(cell) {
  var value = utils.trim(cell.innerText || cell.textContent || '')

  return value.replace(new RegExp(UE.dom.domUtils.fillChar, 'g'), '').replace(/^\s+|\s+$/g, '')
}

//dialog确认事件
dialog.onok = function() {
  //收集信息
  var form = document.forms['data-form'],
    info = getUserConfig()

  //添加图表类型
  info.chartType = currentChartType

  //同步表格数据到编辑器
  syncTableData()

  //执行图表命令
  editor.execCommand('charts', info)
}

/*
 * 同步图表编辑视图的表格数据到编辑器里的原始表格
 */
function syncTableData() {
  var tableData = getTableData()

  for (var i = 1, row; (row = editorTable.rows[i]); i++) {
    for (var j = 1, cell; (cell = row.cells[j]); j++) {
      cell.innerHTML = tableData[i][j]
    }
  }
}
